<template>
  <div class="table-section">
    <el-table :data="data" border style="width: 100%" :max-height="520">
      <el-table-column
        label="排名"
        type="index"
        :index="(i) => computeIndex(indexOffset, i)"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span
            v-if="computeIndex(indexOffset, scope.$index) === 1"
            class="rank-badge gold"
            >1</span
          >
          <span
            v-else-if="computeIndex(indexOffset, scope.$index) === 2"
            class="rank-badge silver"
            >2</span
          >
          <span
            v-else-if="computeIndex(indexOffset, scope.$index) === 3"
            class="rank-badge bronze"
            >3</span
          >
          <span v-else class="rank-number">{{
            computeIndex(indexOffset, scope.$index) || scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="企业名称" align="center" min-width="300" />
      <el-table-column prop="taskCount" label="近一年受理白蚁任务单总量" align="center" width="260">
        <template slot-scope="scope">
          <span>{{ formatRankThird(scope.row.taskCount) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PerformanceTable",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    indexOffset: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    formatRankThird(value) {
      if (value === null || value === undefined) return "";
      if (typeof value === "number") {
        if (value >= 0 && value <= 1) {
          return Math.round(value * 100) + "%";
        }
        return String(value);
      }
      return String(value);
    },
    computeIndex(offset, index) {
      const base = typeof offset === "number" ? Number(offset) : 0;
      const idx = Number(index);
      if (Number.isNaN(idx)) return 0;
      return base + idx + 1;
    },
  },
};
</script>

<style scoped lang="scss">
.table-section {
  flex: 1;
  width: 100%;
  min-height: 0;
  background-color: #fff;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid #cbe4f9;
  box-shadow: 0 6px 14px rgba(16, 154, 255, 0.08);
  overflow: auto;
  padding: 0;
  ::v-deep .el-table {
    .el-table__header-wrapper th,
    .el-table__fixed-header-wrapper th {
      background-color: #ccedef !important;
      color: #333 !important;
    }
  }
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  background-image: url("~@/assets/images/1@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
.rank-badge.gold {
  background-image: url("~@/assets/images/1@2x.png");
}
.rank-badge.silver {
  background-image: url("~@/assets/images/2@2x.png");
}
.rank-badge.bronze {
  background-image: url("~@/assets/images/3@2x.png");
}
.rank-number {
  display: inline-block;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}
</style>


